<!-- 全屏考试页面：ExamAnswer.vue -->
<template>
  <!-- 全屏容器：占满整个浏览器 -->
  <div class="exam-container">
    <!-- 左侧题目导航栏 -->
    <div class="sidebar">
      <!-- 单选题区域 -->
      <div class="question-group">
        <div class="group-title">单选题</div>
        <div class="question-numbers">
          <span v-for="i in getQuestionCount('0')" :key="'single-' + i"
                class="question-number"
                :class="{ active: getQuestionIndexByType('0', i-1) === currentIndex }"
                @click="jumpToQuestion(getQuestionIndexByType('0', i-1))">
            {{ i }}
          </span>
        </div>
      </div>

      <!-- 多选题区域 -->
      <div class="question-group">
        <div class="group-title">多选题</div>
        <div class="question-numbers">
          <span v-for="i in getQuestionCount('2')" :key="'multi-' + i"
                class="question-number"
                :class="{ active: getQuestionIndexByType('2', i-1) === currentIndex }"
                @click="jumpToQuestion(getQuestionIndexByType('2', i-1))">
            {{ i }}
          </span>
        </div>
      </div>

      <!-- 判断题区域 -->
      <div class="question-group">
        <div class="group-title">判断题</div>
        <div class="question-numbers">
          <span v-for="i in getQuestionCount('1')" :key="'judge-' + i"
                class="question-number"
                :class="{ active: getQuestionIndexByType('1', i-1) === currentIndex }"
                @click="jumpToQuestion(getQuestionIndexByType('1', i-1))">
            {{ i }}
          </span>
        </div>
      </div>

      <!-- 简答题区域 -->
      <div class="question-group">
        <div class="group-title">简答题</div>
        <div class="question-numbers">
          <span v-for="i in getQuestionCount('3')" :key="'essay-' + i"
                class="question-number"
                :class="{ active: getQuestionIndexByType('3', i-1) === currentIndex }"
                @click="jumpToQuestion(getQuestionIndexByType('3', i-1))">
            {{ i }}
          </span>
        </div>
      </div>
    </div>

    <!-- 中间题目内容区域 -->
    <div class="main-content">
      <!-- 题目头部 -->
      <div class="question-title-bar">
        <h2>单选题（本题分值：2分）</h2>
        <div class="question-index">第 {{ getQuestionTypeIndex(currentQuestion) }} 题</div>
      </div>

      <!-- 题目内容（根据题目类型渲染） -->
      <div class="question-content" v-if="currentQuestion">
        <h3>{{ currentQuestion.content }}</h3>

        <!-- 客观题选项（判断/单选/多选） -->
        <div class="options" v-if="currentQuestion.type !== '3'">
          <el-radio-group v-model="userAnswer" @change="handleAnswerChange" v-if="currentQuestion.type === '0' || currentQuestion.type === '1'">
            <div class="option-item" v-for="option in currentQuestion.options" :key="option.optionCode">
              <el-radio :label="option.optionCode">{{ option.optionCode }}. {{ option.optionContent }}</el-radio>
            </div>
          </el-radio-group>

          <el-checkbox-group v-model="userAnswer" @change="handleAnswerChange" v-if="currentQuestion.type === '2'">
            <div class="option-item" v-for="option in currentQuestion.options" :key="option.optionCode">
              <el-checkbox :label="option.optionCode">{{ option.optionCode }}. {{ option.optionContent }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>

        <!-- 主观题输入框 -->
        <el-input
            v-if="currentQuestion.type === '3'"
            v-model="userAnswer"
            type="textarea"
            :rows="5"
            placeholder="请输入你的答案"
            class="subjective-input"/>
      </div>

      <!-- 底部导航按钮 -->
      <div class="navigation-buttons">
        <el-button @click="goBack" v-if="currentIndex > 0">
          <i class="el-icon-arrow-left"></i> 上一题
        </el-button>
        <el-button type="primary" @click="goNext" v-if="currentIndex < questionList.length - 1">
          下一题 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
    </div>

    <!-- 右侧信息栏 -->
    <div class="right-panel">
      <div class="timer">
        <h3>剩余时间</h3>
        <div class="time-display">21分54秒</div>
      </div>
      <el-button type="success" class="submit-btn" @click="submitExam">提交试卷</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';
// 路由相关：接收 examId，用于跳转回列表
const route = useRoute();
const router = useRouter();
const examId = route.query.examId;

const questionList = ref([]); // 所有题目（含 content）
const currentIndex = ref(0); // 当前题目索引
const currentQuestion = ref(null); // 当前题目（含 content）
const userAnswer = ref(''); // 存储用户答案（单选/判断存字符串，多选存数组）
// 加载题目列表（核心：获取所有题目）
const loadQuestionList = ()=>{
  axios.get(BASE_URL+'/v1/test/select?examId='+examId).then((res)=>{
    if (res.data.code == 200){
      questionList.value = res.data.data;
      updateCurrentQuestion(); // 初始化第一题（含选项）
    }else {
      ElMessage.error(res.data.message)
    }
  })
}
// 切换题目时更新当前题
const updateCurrentQuestion = () => {
  currentQuestion.value = questionList.value[currentIndex.value] || null;
  // 回显用户已选答案（若有）
  userAnswer.value = currentQuestion.value?.user_answer || '';
  // 处理多选题答案格式（后端返回数组字符串时需解析）
  if (currentQuestion.value?.type === '2' && typeof userAnswer.value === 'string') {
    userAnswer.value = JSON.parse(userAnswer.value) || [];
  }
};
// 页面挂载时加载题目（触发第一次 content 渲染）
onMounted(() => {
  loadQuestionList();
});

// 处理答案变化
const handleAnswerChange = () => {
  // 可以在这里保存用户的答案到本地存储或直接提交到服务器
  questionList.value[currentIndex.value].user_answer = userAnswer.value;
};

// 上一题
const goBack = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    updateCurrentQuestion();
  }
};

// 下一题
const goNext = () => {
  if (currentIndex.value < questionList.length - 1) {
    currentIndex.value++;
    updateCurrentQuestion();
  }
};

// 跳转到指定题目
const jumpToQuestion = (index) => {
  currentIndex.value = index;
  updateCurrentQuestion();
};

// 提交考试
const submitExam = () => {
  // 这里可以添加提交逻辑
  ElMessage.success('考试提交成功');
};

// 获取指定类型题目的数量
const getQuestionCount = (type) => {
  return questionList.value.filter(q => q.type === type).length;
};

// 获取指定类型和索引的题目在总列表中的位置
const getQuestionIndexByType = (type, typeIndex) => {
  const questions = questionList.value.filter(q => q.type === type);
  if (typeIndex < questions.length) {
    return questionList.value.findIndex(q => q === questions[typeIndex]);
  }
  return -1;
};

// 获取当前题目在同类型中的索引
const getQuestionTypeIndex = (question) => {
  if (!question) return 0;
  const questions = questionList.value.filter(q => q.type === question.type);
  return questions.findIndex(q => q === question) + 1;
};
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.exam-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 左侧题目导航栏 */
.sidebar {
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
  overflow-y: auto;
}

.question-group {
  margin-bottom: 20px;
}

.group-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  padding-left: 5px;
}

.question-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-number {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: #f0f2f5;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.question-number:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.question-number.active {
  background-color: #409eff;
  color: #fff;
}

/* 中间主内容区域 */
.main-content {
  flex: 1;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 题目标题栏 */
.question-title-bar {
  background-color: #409eff;
  color: #fff;
  padding: 15px 20px;
  border-radius: 4px 4px 0 0;
  margin: -20px -20px 20px -20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-title-bar h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.question-index {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
}

/* 题目内容区域 */
.question-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.question-content h3 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* 选项样式 */
.options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.option-item {
  font-size: 14px;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.option-item:hover {
  background-color: #f5f7fa;
}

.option-item .el-radio,
.option-item .el-checkbox {
  font-size: 14px;
  color: #606266;
}

/* 主观题输入框 */
.subjective-input {
  width: 100%;
  font-size: 14px;
}

/* 底部导航按钮 */
.navigation-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.navigation-buttons .el-button {
  padding: 8px 24px;
  font-size: 14px;
}

/* 右侧信息栏 */
.right-panel {
  width: 220px;
  background-color: #fff;
  border-left: 1px solid #e6e6e6;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer {
  text-align: center;
  margin-bottom: 30px;
}

.timer h3 {
  font-size: 16px;
  color: #606266;
  margin-bottom: 15px;
  font-weight: normal;
}

.time-display {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  margin-top: 20px;
}
</style>
